import React, { Component } from 'react';
import { Layout,List, Divider  ,Table, Select, Space,
    Button,Modal,Form, Input, Row ,Col,
    Checkbox,Tree,message,Avatar} from 'antd';

import {FileAddOutlined, EditOutlined, ExclamationCircleOutlined,SmileOutlined,  DownOutlined,
    FrownOutlined,
    FolderOutlined,
    PieChartOutlined,
    FolderViewOutlined,
    FolderAddOutlined,
    MehOutlined,
    FrownFilled} from '@ant-design/icons';
import {getCaFolderTree,save,deleteCaFolder} from "../api/caFolder";
import Card from "antd/es/card";
import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
export default class AnalyzerFolder extends Component {

    constructor(props) {
        super(props)
        this.state = {
            folderTree: [],
            isModalVisibleForFolder:false,
            currentFolderId:-1,         //当前选中的文件夹id
            form: {
                folderName: '', //文件夹名称
                ftype: '',   //类型
              }
        }
    }

    componentDidMount() {
        getCaFolderTree().then(
            (res) => {
                console.log(res.data.children);
                let datas=res.data.children;
                //datas[0].icon=<MehOutlined />;
                if(datas.children.length>0){
                    for (let elem of datas.children) {
                        if(elem.type=="1"){
                            elem.icon=<FolderOutlined />;
                        }
                    }
                }
                this.setState({folderTree: datas
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    }




    render() {
        const showModal = (that) => {
            that.setState({isModalVisibleForFolder:true})
        };


        const deleteFolder= (that) => {
            //todo
            //弹出警告框,然后delete folder


            if (this.state.currentFolderId==-1){
                message.info("请选择一个需要删除的条目")
                return;
            }

            // const { confirm } = Modal;
            let _currentFolderId=that.state.currentFolderId;
            Modal.confirm({
                title: 'Do you Want to delete this items',
                icon: <ExclamationCircleOutlined />,
                content: '删除选中的条目',
                onOk() {
                    deleteCaFolder({
                        "id": _currentFolderId,
                        "key": _currentFolderId
                    }).then(
                        (res) => {
                            if(res.code=="200"){
                                message.success("删除成功");
                            }else{
                                message.error("删除失败")
                            }
                        },
                        (error) => {
                            message.error("删除失败")
                        }
                    ).then( (res) => {
                            getCaFolderTree().then(
                                (res) => {

                                    let treeDatas=res.data.children;

                                    treeDatas[1].title='kkkkk';

                                    //treeDatas[0].[0].icon=<SmileOutlined />

                                    // that.setState({folderTree: treeDatas,
                                    // });
                                },
                                (error) => {
                                    console.log("get response failed!");
                                }
                            );



                        },
                        (error) => {
                            message.error("删除失败")
                        })
                },
                onCancel() {
                    console.log('Cancel');

                },
            });
            // that.setState({isModalVisibleForFolder:false})
        };

        const handleCancel = () => {
            this.setState({isModalVisibleForFolder:false})        };

        const onSelect = (selectedKeys, info) => {
            console.log('selected[0]:', selectedKeys[0]);
            this.setState({currentFolderId:selectedKeys[0]})
        };


        const onFinish = (values) => {
            console.log('Success:', values);
            save({
                "description": 0,
                "formulaType": 0,
                "generation": 2,
                "hasChildren": 0,
                "name": values.folderName,
                "objType": 101,
                "parent": 15001,
                "position": 0,
                "queryType": 0,
                "type": values.ftype,
            }).then(
                (res) => {



                    getCaFolderTree().then(
                        (res) => {
                            this.setState({folderTree: res.data.children,
                                isModalVisibleForFolder:false
                            });
                        },
                        (error) => {
                            console.log("get response failed!");
                        }
                    );


                    // this.setState({folderTree: res.data.children
                    // });
                },
                (error) => {
                    console.log("get response failed!");
                }
            );
        };

        const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
        };



        const onFTypeChange = (value) => {

        };

        const { Option } = Select;



        return (
            <div style={{height:"100%",  display: "flex",flexDirection: "column"}}>
                <Row>
                    <Col span={1}>
                        <span onClick={()=>showModal(this)}><FileAddOutlined /> </span>
                    </Col>

                    <Col span={1}>
                    <EditOutlined />
                </Col>

               <Col span={1}>
                        <span onClick={()=>deleteFolder(this)}> <CloseOutlined /> </span>

               </Col>


                </Row>


                <div style={{flex:"auto",display:"flex"}}>
                    {/*左边区域*/}
                    <div style={{width:"250px"}}>
                        <Card title="文件夹"  style={{ width: "250" }}>
                            <Tree
                                onSelect={onSelect}
                                showIcon={true}
                                treeData={this.state.folderTree}
                            />


                        </Card>



                    </div>

                    <Divider type="vertical" />

                    {/*右边区域*/}
                    <div style={{backgroundColor:"#cccccc",flex:"auto"}}>right</div>


                </div>

                <Modal title="分析目录" visible={this.state.isModalVisibleForFolder}
                       onCancel={handleCancel}
                       id="test001"
                       footer={null}
                >
                    <Form
                        name="fileFolder"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="目录名"
                            name="folderName"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your folderName!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="类型"
                            name="ftype"

                        >


                            <Select
                                placeholder="Select a option"
                                onChange={onFTypeChange}
                                allowClear
                            >
                                <Option value="1">普通</Option>
                                <Option value="2">分析</Option>
                                <Option value="3">仪表盘</Option>
                                <Option value="4">数据对象</Option>
                            </Select>

                        </Form.Item>



                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>

           </div>
        );
    }
}

